import React from 'react';
import { inject, observer } from 'mobx-react';
import { Carousel } from 'antd';
import { getLoginBgImageStyle } from '../../../util/loginUtil';

import './css/';
import E9MultiLang from './E9MultiLang';
import E9Form from './E9Form';
import E9QRCode from './E9QRCode';
import E9BgImageBox from './E9BgImageBox';
import E9Custom from './E9Custom';
import LoginBtn from './LoginBtn';
import E7FormCloud from '../e7login/formCloud';
import E8FormCloud from '../e8login/formCloud';

@inject('portalLoginStore')
@observer
class E9Login extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        const { portalLoginStore } = this.props;
        portalLoginStore.onWindowResize();
    }

    render() {
        const { portalLoginStore } = this.props;
        const { loading, labelObj, state, setState, setStateAndCache, getElementStyle } = portalLoginStore;
        const {
            templateType,
            win_width,
            win_height,
            bgImagesInfo = [],
            loginSettingInfo = {},
            loginType,
            initialSlide,
            autoCarousel,
            carouselTime,
        } = state;
        const { loginInfo, loginForm, qrcode } = loginSettingInfo;
        const { bgType = 'img', videosrc, videowidth = 1920, videoheight = 1080, bgColor, bgOpacity, showQrcode, onlyQrcode, showBgImageBox } = loginInfo;

        let bgImageComp = <div />;
        let bgImageStyle = getLoginBgImageStyle(loginInfo);
        if (bgType == 'img') {
            if (autoCarousel && bgImagesInfo.length > 1) {
                let carouseImgHtml = bgImagesInfo.map((imgObj) => {
                    bgImageStyle = Object.assign({}, bgImageStyle, { backgroundImage: `url(${imgObj.imgsrc})` });
                    return <div><div className="e9login-content"><div className="e9login-bg-image" style={bgImageStyle} /></div></div>;
                });
                bgImageComp = (
                    <div className="e9login-carousel">
                        <Carousel ecId={`${this && this.props && this.props.ecId || ''}_Carousel@9b9jzo`}
                          style={{ height: '100%' }}
                          key={carouselTime}
                          autoplay={true}
                          dots={false}
                          fade={true}
                          speed={800}
                          autoplaySpeed={carouselTime * 1000}
                          initialSlide={initialSlide}
                          afterChange={current => setState({ initialSlide: current < 0 ? 0 : current })}
                        >
                        {carouseImgHtml}
                        {/* { */}
                            {/* bgImagesInfo.map(item => { */}
                                {/* return ( */}
                                    {/* <img */}
                                        {/* src={item.imgsrc} */}
                                        {/* alt="" */}
                                        {/* style={{ */}
                                            {/* width: win_width < 800 ? 800 : win_width, */}
                                            {/* height: win_height < 660 ? 660 : win_height */}
                                        {/* }} */}
                                    {/* /> */}
                                {/* ); */}
                            {/* }) */}
                        {/* } */}
                        </Carousel>
                    </div>
                );
            } else {
                bgImageComp = <div className="e9login-bg-image" style={getLoginBgImageStyle(loginInfo)} />;
            }
        } else if (bgType == 'video' && videosrc) {
            let o = win_width < 800 ? 800 : win_width;
            let r = win_height < 660 ? 660 : win_height;
            let s = o;
            let l = o * videoheight / videowidth;
            if (r > l) {
                l = r;
                s = r * videowidth / videoheight;
            }
            let p = l - r;
            let u = s - o;
            let c = -(Math.abs(p) / 2);
            let d = -(Math.abs(u) / 2);
            const style = {
                position: 'absolute',
                width: `${s}px`,
                height: `${l}px`,
                top: `${c}px`,
                left: `${d}px`,
            };
            bgImageComp = (
                <video muted autoPlay loop style={style}>
                    <source src={videosrc} type="video/mp4" />
                </video>
            );
        }

        let formCloud = null;
        switch (templateType) {
            case 'E7':
                formCloud = <E7FormCloud ecId={`${this && this.props && this.props.ecId || ''}_E7FormCloud@87d8bz`} {...this.props} isPositionDynamicCss={true} />;
                break;
            case 'E8':
                formCloud = <E8FormCloud ecId={`${this && this.props && this.props.ecId || ''}_E8FormCloud@kawc52`} {...this.props} isPositionDynamicCss={true} />;
                break;
            default:
                formCloud = (
                    <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_React.Fragment@jwnl6r`}>
                        {
                            showQrcode && !onlyQrcode ? (
                                <div className="e9login-qrcode e9login-element" style={{ color: qrcode.color, ...getElementStyle(qrcode) }}>
                                    {loginType == 'form' ? <i className="icon-coms-Scan" title={labelObj.smdl} onClick={() => setStateAndCache('loginType', 'QRCode')} /> : <i className="icon-coms-Revoke2" title={labelObj.fh} onClick={() => setStateAndCache('loginType', 'form')} />}
                                </div>
                            ) : ''
                        }
                        <div className="e9login-form-box e9login-element" style={getElementStyle(loginForm)}>
                            <E9MultiLang ecId={`${this && this.props && this.props.ecId || ''}_E9MultiLang@fwtz7o`} />
                            {loginType == 'form' ? <E9Form ecId={`${this && this.props && this.props.ecId || ''}_E9Form@42jlrc`} /> : <E9QRCode ecId={`${this && this.props && this.props.ecId || ''}_E9QRCode@44pjha`} />}
                        </div>
                        {loginType == 'form' ? <LoginBtn ecId={`${this && this.props && this.props.ecId || ''}_LoginBtn@lv8n1r`} /> : ''}
                    </React.Fragment>
                );
        }

        return (
            <div id="LoginContainer" className="e9login-container" onClick={() => setState({ multiLangVisible: false })}>
                <div className="e9login-content">
                    {!loading && formCloud}
                    <div className="e9login-bg-color" style={{ backgroundColor: bgColor, opacity: bgOpacity }} />
                    {bgImageComp}
                    {bgType == 'img' && showBgImageBox ? <E9BgImageBox ecId={`${this && this.props && this.props.ecId || ''}_E9BgImageBox@ldmk7e`} /> : ''}
                    <E9Custom ecId={`${this && this.props && this.props.ecId || ''}_E9Custom@yxeayu`} />
                </div>
            </div>
        );
    }
}

export default E9Login;
